import React, { useState, useEffect } from 'react';

import LunboArrow from './lunboItemdots/LunboArrow';
import Lunboitem from './lunboItemdots/Lunboitem';
import Lunbodots from './lunboItemdots/Lunbodots';

import './index.less';
export default function Lunbo(props) {
  interface itemlist<T> {
    src?: string;
    index: T;
  }
  const initialState: itemlist<number>[] = [
    {
      index: 0,
      src: 'https://img2.baidu.com/it/u=1221742606,3642652738&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=629',
    },
    {
      index: 1,
      src: 'https://img2.baidu.com/it/u=594262035,1610089343&fm=26&fmt=auto&gp=0.jpg',
    },
    {
      index: 2,
      src: 'https://img0.baidu.com/it/u=2976105222,2386068091&fm=26&fmt=auto&gp=0.jpg',
    },
  ];
  const [imgList, setimgList] = useState(initialState);
  const [index1, setindex1] = useState(0);
  const [autupaly, setautupaly] = useState(props.autoplay || false);
  var timer = null;
  //控制箭头
  function arrowAction(status) {
    if (status === 'left') {
      if (index1 === 2) {
        setindex1(() => {
          return 0;
        });
      } else {
        setindex1((val) => {
          return val + 1;
        });
      }
    }
    if (status === 'right') {
      if (index1 === 0) {
        setindex1(() => {
          return 2;
        });
      } else {
        setindex1((val) => {
          return val - 1;
        });
      }
    }
    console.log(index1, 'index1');
  }
  //控制焦点
  function myfcous(i: number) {
    setindex1(() => {
      return i;
    });
  }
  function mysetautupaly() {
    if (autupaly === true) {
      timer = setInterval(() => {
        setindex1((val) => {
          return val + 1;
        });
      }, 1000);
    } else {
      timer = null;
    }
  }
  //监听自动轮播
  useEffect(() => {
    mysetautupaly();
  }, [autupaly]);
  return (
    <div>
      <div className="container">
        <Lunboitem item={imgList} index1={index1}></Lunboitem>
        <LunboArrow arrowAction={arrowAction}></LunboArrow>
        <Lunbodots index1={index1} myfcous={myfcous} item={imgList}></Lunbodots>
      </div>
    </div>
  );
}
